<template>
  <el-tooltip
    placement="bottom"
    :content="content"
    v-if="isOverLines(content, width, fontSize, lineHeight, lines)"
  >
    <div class="text-one-line-ellipsis" :style="{ width: `${width / 100}rem` }">
      {{ realContent }}
    </div>
  </el-tooltip>
  <div v-else class="text-one-line-ellipsis">{{ realContent }}</div>
</template>
<script>
export default {
  name: "OneLineShow",
  props: {
    content: String,
    width: Number,
    fontSize: Number,
    lineHeight: {
      type: Number,
      default: 16,
    },
    lines: {
      Number,
      default: 1,
    },
  },
  computed: {
    realContent() {
      return this.content !== undefined && this.content !== ""
        ? this.content
        : "-";
    },
  },
  methods: {
    isOverLines(content, width, fontSize, lineHeight = 16, lines = 1) {
      const testDom = document.createElement("div");
      testDom.style.width = `${width}px`;
      testDom.style.fontSize = `${fontSize}px`;
      testDom.style.position = "fixed";
      testDom.style.visibility = "hidden";
      testDom.style.wordBreak = "break-all";
      testDom.style.lineHeight = `${lineHeight}px`;
      testDom.innerHTML = content;
      document.body.appendChild(testDom);
      const { height } = testDom.getBoundingClientRect();
      document.body.removeChild(testDom);
      return height > lineHeight * lines;
    },
  },
};
</script>
<style scoped>
/* Add your styles here */
.text-one-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
